require(['./config'], () => {
  require(["template", 'jquery', 'header', 'footer'], (template) => {
    class Index {
      constructor() {
        this.init()
        this.img()
        this.bd_height = new Array()
        this.old_key = 0;
        this.roll()
      }
      init () {
        let select = [
          [
            ["唇部"],
            ["眼部"],
            ["面部"],
            ["眉毛"],
            ["身体"]
          ],
          [
            ["洗面清洁"],
            ["防晒护肤"],
            ["精华护肤"],
            ["面霜修护"],
            ["保湿护肤"],
          ],
          [
            ["魅力香水"],
            ["檀香香水"],
            ["古龙香水"],
            ["经典香水"],
            ["清新香水"]
          ]
        ]
        const id = location.search.slice(4)
        for (let i = 0; i < 5; i++) {
          console.log(select[id][i]);
          $.get('http://www.xiongmaoyouxuan.com/api/search', {
            word: select[id][i][0],
            start: 0,
            sort: 0,
            couponOnly: NaN,
            minPrice: 0,
            maxPrice: 99999
          }, (resp) => {
            if (resp.code == 200) {
              console.log(resp);
              const { list } = resp.data
              $('#detail-list' + i).html(template("detail-list-template", {
                list: list.slice(0, 3),
                categories: select[id][i]
              }))
              //   $('#box').html(template("detail-nav-template", {
              //     categories: select[id]
              // }))
            }
            // this.roll()
          })
        }
        $('#box').html(template("detail-nav-template", {
          categories: select[id]
        }))
        this.roll()
        // $.get(`http://quan.lukou.com/api/tab/${id}`, {
        //         start: 0
        //     },
        //     resp => {
        //         if (resp.code == 200) {
        //             const {
        //                 categories
        //             } = resp.data
        //             const {
        //                 list
        //             } = resp.data.items
        //            $('.detail-list').html(template("detail-list-template", {
        //                 list: list.slice(3, 6),
        //                 categories: categories.slice(2,7)
        //             }))
        //             $('#box').html(template("detail-nav-template", {
        //                 categories: select[i]
        //             }))
        //         }
        //         // this.img()
        //         this.roll()

        //     })
      }
      img () {
        const id = location.search.slice(4)
        $.get('/libs/json/img.json', resp => {
          resp = resp.filter(shop => {
            return shop.id == id
          })
          const html = template('imgTemplate', {
            list: resp
          })
          $('.detail-img').html(html)
        })
      }
      roll () {
        let bd_height = this.bd_height
        let old_key = this.old_key
        $(function () {
          $('.detail-bf').each(function () {
            bd_height[$(this).index()] = $(this).offset().top;
          })
          // 滚动条事件
          $(window).scroll(function () {
            // 当前滚动条的高度
            var sl_this = $(this).height();
            // 滚动条上放的高度
            var sl_top = $(this).scrollTop();
            // 出现的高度
            var show_ht = sl_top + sl_this / 2;
            // 获取楼层的层数，0层开始
            var key = 0;

            // 此处可以根据自己的情况进行更改
            // for，each，for in都可以 建议改为for循环
            // console.log(bd_height);
            bd_height.map(function (value, index) {
              // 阶梯判断[这一步很重要]	
              if (show_ht >= value) {
                key = index;
              }
            })
            // 修改楼梯的样式
            if (old_key == key) {
              return false;
            } else {
              old_key = key;
              // 调起修改样式函数
              change_step(key);
            }
          })
        })
        /*修改楼梯的函数*/
        function change_step (key) {
          // 获取当前的背景块定位
          // 获取目标位置的高度
          var ul_ftop = $('.detail-nav #box').offset().top;
          var li_ftop = $('.detail-nav #box li').eq(key).offset().top;
          var target_top = li_ftop - ul_ftop;
          // 开启动画
        }
        /*修改建筑的函数*/
        function change_building (key) {
          // 当前滚动条的高度
          var sl_this = $(window).height();
          // 获取目标的位置
          var target = $('.detail-bf').eq(key).offset().top;
          target -= sl_this / 2 - 1;
          // 开启动画
          $('html,body').animate({ scrollTop: target });//
          $('html,body').animate({ scrollTop: target });
        }
        /*点击跳转到楼层*/
        $('.detail-nav #box li').click(function () {
          var key = $(this).index();
          // 跳转建筑
          change_building(key);
        })

      }
    }
    new Index()
  })
})